<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>Tutorial: 基础版 - Documentation</title>
    
    
    
        <meta name="keywords" content="webpack ES6 " />
        <meta name="keyword" content="webpack ES6 " />
    
    
    
    <meta property="og:title" content="test2"/>
    <meta property="og:type" content="website"/>
    <meta property="og:image" content=""/>
    
    <meta property="og:url" content=""/>
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <script src="scripts/nav.js" defer></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav class="wrap">
    
    <input type="text" id="nav-search" placeholder="Search" />
    
    <h2><a href="index.html">Home</a></h2><h2><a href="https://gitee.com/shanliangdeYWJ" target="_blank" class="menu-item" id="website_link" >码云shanliangdeYWJ</a></h2><h3>Tutorials</h3><ul><li><a href="tutorial-Overview.html">Overview</a></li></ul><h3>Namespaces</h3><ul><li><a href="initCompute.html">initCompute</a><ul class='methods'><li data-type='method' style='display: none;'><a href="initCompute.html#.div">div</a></li><li data-type='method' style='display: none;'><a href="initCompute.html#.minus">minus</a></li><li data-type='method' style='display: none;'><a href="initCompute.html#.mul">mul</a></li><li data-type='method' style='display: none;'><a href="initCompute.html#.plus">plus</a></li></ul></li><li><a href="initTools.html">initTools</a><ul class='methods'><li data-type='method' style='display: none;'><a href="initTools.html#.digitalize">digitalize</a></li><li data-type='method' style='display: none;'><a href="initTools.html#.getTarget">getTarget</a></li></ul></li></ul><h3>Global</h3><ul><li><a href="global.html#bindEvent">bindEvent</a></li><li><a href="global.html#init">init</a></li><li><a href="global.html#oBtnClick">oBtnClick</a></li><li><a href="global.html#oBtnGroup">oBtnGroup</a></li><li><a href="global.html#oCalculator">oCalculator</a></li><li><a href="global.html#oInputs">oInputs</a></li><li><a href="global.html#oResult">oResult</a></li><li><a href="global.html#renderResult">renderResult</a></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">Tutorial: 基础版</h1>
    

    <section>

<header>
    

    <h2>基础版</h2>
</header>

<article>
    <p><a href="tutorial-Overview.html">Overview</a></p>
<p>新建 index.html</p>
<pre class="prettyprint source lang-html"><code>&lt;!DOCTYPE html>
&lt;html lang=&quot;en&quot;>

&lt;head>
    &lt;meta charset=&quot;UTF-8&quot;>
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>
    &lt;title>计算器&lt;/title>
&lt;/head>

&lt;body>
    &lt;div class=&quot;calculator J_calculator&quot;>
        &lt;p>结果：&lt;span class=&quot;result&quot;>&lt;/span>&lt;/p>
        &lt;div class=&quot;input-group&quot;>
            &lt;input type=&quot;text&quot; value=&quot;0&quot;>
            &lt;input type=&quot;text&quot; value=&quot;0&quot;>
        &lt;/div>
        &lt;div class=&quot;btn-group&quot;>
            &lt;button data-method=&quot;plus&quot;>+&lt;/button>
            &lt;button data-method=&quot;minus&quot;>-&lt;/button>
            &lt;button data-method=&quot;mul&quot;>*&lt;/button>
            &lt;button data-method=&quot;div&quot;>/&lt;/button>
        &lt;/div>
    &lt;/div>
    &lt;script src=&quot;./js/index.js&quot; type=&quot;text/javascript&quot;>&lt;/script>
&lt;/body>

&lt;/html>
</code></pre>
<p>js/index.js</p>
<pre class="prettyprint source lang-js"><code>var oCalculator = document.getElementsByClassName('J_calculator')[0],
    oResule = oCalculator.getElementsByClassName('result')[0],
    fInput = document.getElementsByTagName('input')[0],
    sInput = document.getElementsByTagName('input')[1],
    oBtnGroup = document.getElementsByClassName('btn-group')[0];

console.log(oCalculator,
    oResule,
    fInput,
    sInput,
    oBtnGroup);

// 事件处理函数,button 的父级绑定事件处理函数可以通过事件对象，和事件原对象找到 button， 知识点：事件捕获，事件冒泡
oBtnGroup.addEventListener('click', oBtnClick, false);

/**
 * 按钮父盒子绑定点击事件对象
 * @param {Event} ev 事件
 */
function oBtnClick(ev) {
    var e = ev || window.event,
        tar = e.target || e.srcElement,
        tagName = tar.tagName.toLowerCase();
    if (tagName === 'button') {
        var method = tar.getAttribute('data-method');
        console.log(method);
        fVal = Number(fInput.value.replace(/\s+/g, '')) || 0;
        sVal = Number(sInput.value.replace(/\s+/g, '')) || 0;

        switch (method) {
            case 'plus': oResule.innerText = fVal + sVal; break;
            case 'minus': oResule.innerText = fVal - sVal; break;
            case 'mul': oResule.innerText = fVal * sVal; break;
            case 'div': oResule.innerText = fVal / sVal; break;
            default: break;
        }
    }
}
</code></pre>
</article>

</section>

    
    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.6</a> on Tue Dec 01 2020 08:42:14 GMT+0800 (GMT+08:00) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>

<script src="scripts/search.js" defer></script>


<script src="scripts/collapse.js" defer></script>


    <link type="text/css" rel="stylesheet" href="./shanliangdeYWJ.css">
    
</body>
</html>